import { createElement, render, renderDOM } from './element.js';
import patch from './patch.js';
import diff from './diff.js';
// let virtualDOM1 = createElement("ul", { class: "list" }, [
//   createElement("li", { class: "item" }, ["1"]),
//   createElement("ul", { class: "item" }, ["2"]),
//   createElement("div", { class: "item" }, [ createElement("a", { class: "item" }, ["连接"]),]),
// ]);
//
// let virtualDOM2 = createElement("ul", { class: "list-g" ,style:'color:red'}, [
//   createElement("li", { class: "item1" }, ["2"]),
//   createElement("ul", { class: "item3" },[
//     createElement("li", { class: "item" }, ["1"]),
//     createElement("li", { class: "item" }, ["2"]),
//     createElement("li", { class: "item" }, ["3"])
//   ] ),
//   createElement("div", { class: "item" }, ["1"]),
// ]);

let virtualDOM1 = createElement('ul', {class: 'item'}, ['2']);
let virtualDOM2 = createElement('ul', {class: 'item'}, [
  createElement('li', {class: 'item'}, ['1']),
  createElement('li', {class: 'item'}, ['2']),
  createElement('li', {class: 'item'}, ['3'])]);

console.log(virtualDOM2);
let el = render(virtualDOM1);
let patches = diff(virtualDOM1, virtualDOM2);
console.log('最终的补丁包', patches);
// patch(el,patches);
// console.log('最终的树',patch(el,patches));
renderDOM(patch(el, patches), document.getElementById('app'));
